Tailwind CSS v4

概述

Tailwind CSS v4是现代化的实用优先CSS框架的重大版本，引入了破坏性变更的架构调整。

关键内容

1. 主要变更：
2. 配置文件：移除了 tailwind.config.ts，改为在CSS中直接配置
3. Vite插件：使用 @tailwindcss/vite 插件替代PostCSS方式
4. 动画库：tailwindcss-animate 替换为 tw-animate-css（v4专用）
5. 主题扩展：使用 @theme inline { --color-*: } 替代 extend: { colors: {...} }

6. CSS导入：使用 @import "tailwindcss" 替代 @tailwind base; @tailwind components

7. 强制四步架构模式：

8. Step 1: 导入基础 (@import "tailwindcss", @import "tw-animate-css")
9. Step 2: 定义CSS变量（在:root中，非@layer base）
10. Step 3: 映射到Tailwind utility类（使用@theme inline）

11. Step 4: 应用基础样式（使用@layer base）

12. 常见问题：

13. CSS变量未加hsl()包装导致颜色不渲染
14. tw-animate-css缺失导致shadcn动画失效
15. @theme inline的dark mode切换失效（已知Bug）

来源

• jezweb/claude-skills — 前端插件工程
• 04_jezweb_claude_skills_frontend — Tailwind v4 主题工程详解

相关

• shadcn/ui — UI组件库
• Frontend Plugin — 前端插件体系
• React 19 — 前端框架
• Tailwind CSS — 前身版本